<template>
  <div class="com-container">
    <div class="com-chart" ref="production_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intervalId: null, //用于存储计时器ID
      chartInstance: null,
      allData: null, //服务器返回的数据
      allNameData: null
    }
  },
  //整个组件加载完成后
  mounted() {
    this.initChart()
    this.getData()
    this.intervalId = setInterval(this.getData, 10000)
  },
  beforeDestroy() {
    // 在组件销毁之前清除计时器
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },
  methods: {
    //初始化echartsInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.production_ref)
      //对图表初始化配置的控制
      const initOption = {
        tooltip: {
          trigger: 'axis', //触发提示
          backgroundColor: 'rgba(255,255,255,0.1)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#7B7DDC'
            }
          }
          // formatter: function(params) {
          //   let result = '姓名：' + params[0].axisValue + '<br/>' // 添加姓名信息
          //   result += params[0].marker + '生产率：' + params[0].data + '%' + '<br/>' // 在生产率后加上%
          //   result += params[1].marker + '实际生产：' + params[1].data + '<br/>'
          //   result += params[2].marker + '计划生产：' + params[2].data
          //   return result
          // }
        },
        legend: {
          data: ['计划生产', '实际生产', '生产率'],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '0%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false //不显示刻度轴上的小短线
          }
        },
        yAxis: [
          {
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisTick: {
              show: false //不显示刻度轴上的小短线
            },
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '生产率',
            type: 'line',
            smooth: true,
            showAllSymbol: true, //数据点显示标记号
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1, //用左边的y轴
            itemStyle: {
              normal: {
                color: '#F02FC2'
              }
            }
          },
          {
            name: '实际生产',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                //指明颜色渐变的方向(x1,y1,x2,y2)
                //指明不同百分比下的颜色的值
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#956FD4' },
                  { offset: 1, color: '#3EACE5' }
                ])
              }
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#B4B4B4'
              }
            }
          },
          {
            name: '计划生产',
            type: 'bar',
            barGap: '-100%',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(156,107,211,0.8)' },
                  { offset: 0.1, color: 'rgba(156,107,211,0.5)' },
                  { offset: 1, color: 'rgba(156,107,211,0.2)' }
                ])
              }
            },
            z: -12, //放在其他系列的后面
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#B4B4B4'
              }
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    //获取服务器的数据
    async getData() {
      // const ret = await this.$http.get('/static/json/productionManagement.json')
      // // console.log(ret.data.data)
      // this.allData = ret.data.data
      const ret = await this.$http.post('http://localhost:9999/production_line/api/plan/search', {})
      this.allData = ret.data
      // console.log(this.allData)
      const name = await this.$http.post('http://localhost:9999/production_line/api/users/getUserList', {})
      this.allNameData = name.data
      // console.log(this.allNameData)
      this.updateChart()
    },
    //更新图表
    updateChart() {
      // const month = []
      // const plannedProduction = []
      // const actualProduction = []
      // this.allData.forEach(item => {
      //   const {
      //     name,
      //     value: { planned, actual }
      //   } = item
      //   month.push(name)
      //   plannedProduction.push(planned)
      //   actualProduction.push(actual)
      // })
      // const productionRate = actualProduction.map((actual, index) => {
      //   const rate = actual / plannedProduction[index]
      //   return parseFloat(rate.toFixed(2))
      // })
      // // console.log(month, plannedProduction, actualProduction, productionRate)
      const operationName = this.allData.map(item => {
        const correspondingNameData = this.allNameData.find(nameData => nameData.jobId === item.operationId)
        // 如果找到了对应的nameData，则将name加到item中
        if (correspondingNameData) {
          item.name = correspondingNameData.name
        }
        return item.name
      })
      const plannedProduction = this.allData.map(item => item.operationCount)
      const actualProduction = this.allData.map(item => Math.floor((item.operationCount * item.finishRate) / 100))
      const productionRate = this.allData.map(item => item.finishRate)
      // console.log(operationName, plannedProduction, actualProduction, productionRate)
      const dataOption = {
        xAxis: {
          data: operationName
        },
        series: [
          {
            data: productionRate
          },
          {
            data: actualProduction
          },
          {
            data: plannedProduction
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>

<style></style>
